
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="less/upload-temp.css">
    <script src="../src/lib/jquery.js"></script>
    <style>
        .demo{
            width:600px;
            height:500px;
            background-color:#dbdbdb;
            margin:0 auto;
        }
        .btn{
            display: inline-block;
            width: 100px;
            height:30px;
            border-radius: 5px;
            background-color: #1fb394;
            font-size: 14px;
            text-align: center;
            line-height: 30px;
            color:#fff;
        }
    </style>
</head>
<body>


<div class="demo">

    <form action="http://127.0.0.1/demo2.php" method="post" enctype="multipart/form-data">
        <div data-name="upload" class="img-upload clearfix">
            <label class="upload-list upload-add"><input id="upInput" type="file" multiple class="hide"></label>
        </div>
    </form>
    <div class="mt5 ml5">
        <span class="btn">点击上传</span>
    </div>
</div>

<script>

    /**
     * @ 异步多文件手动上传
     * */


    var up = {
        imgArr:[],
        initEvent:function(){
            var thatUp = this;
            $('.btn').on('click',function(){
                upLoad(thatUp.imgArr)
            });

            $('#upInput').on('change',function(){
                var _this = $(this);
                var pr = _this.closest("[data-name='upload']");
                var rule = thatUp.readFileRule(_this,50,3);
                if(rule){
                    console.log(rule);
                    return;
                }
                thatUp.readFileUrl(_this,pr);
            });

            //删除事件
            $('.img-upload').on('click','.icon-remove',function(){
                var parent = $(this).parents('.upload-list');
                var index = parent.index();
                thatUp.imgArr.splice(index,1);
                parent.remove();
                $('#upInput').val('');
            });
        },


        //校验图片格式
        readFileRule:function(file,size,num){
            var fileDom = file[0].files;
            var mes = '';
            for(var i = 0;i<fileDom.length;i++){
                if((fileDom[i].size/1000)>size){
                    mes = 'size';
                    break;
                }else if(!/(jpeg)|(png)|(jpg)$/.test(fileDom[i].type)){
                    mes = 'type';
                    break;
                }
            }
            if(num && fileDom.length+this.imgArr.length > num){
                mes = 'length'
            }
            return mes;
        },

        //读取临时文件
        readFileUrl:function(input,pr){
            var inputObj = input;
            var _this = this;
            var template = '<div class="upload-list" data-name="'+inputObj.prop('id')+'">' +
                    '<div class="list-layer"><i class="icon-remove">&times;</i></div>' +
                    '</div>';
            $.each(inputObj[0].files,function(index,item){
                _this.imgArr.push(item);
                var str = $(template);
                var reader = new FileReader();
                reader.readAsDataURL(item);
                reader.onload = function(){
                    str.css('background-image',"url("+reader.result+")");
                    pr.find(".upload-add").before(str);
                };
            })
            $('#upInput').val('');
        }
    };

    up.initEvent();


    function upLoad(inputArr,para){
        var fd = new FormData();
        $.each(inputArr,function(index,item){
            fd.append('upload[]',item)
        });
        fd.append("para",JSON.stringify(para));
        $.ajax({
            type : 'post',
            url : 'http://127.0.0.1/demo2.php',
            data : fd,
            cache : false,
            processData : false,
            contentType : false,
            success : function(){
                console.log('ok')
            },
            error : function(){
                console.log('err')
            }
        })
    }

</script>

</body>
</html>







<script>
    //图片读取
    /*for(var i = 0 ;i<file.length;i++){

     //console.log(file[i].name)

     var reader = new FileReader();

     reader.readAsDataURL(file[i]);

     reader.onload = function(){

     }
     //console.log(reader)
     }*/


    /*function upLoadImg(file,index){

     var fd = new FormData();

     fd.append('imgName',file[index])

     fd.append("para",JSON.stringify({name:'小明',age:12}));


     var xhr = new XMLHttpRequest();

     xhr.onreadystatechange = function(){

     if(xhr.readyState==1){

     console.log('准备发送')

     }

     if (xhr.readyState==4){

     if (xhr.status==200){

     if(xhr.responseText == 1){

     console.log('ok')

     }else{

     alert('服务错误')
     }

     }else{}
     }
     }

     xhr.open("POST",'http://192.168.0.100/demo.php');

     xhr.send(fd);

     //xhr.upload.addEventListener("progress", uploadProgress, false);

     }*/
</script>